<template>
  <div class="pageBox">
    <head-component title="锁仓列表"></head-component>
    <div class="listBox">
      <div class="menu flex-between">
        <div class="num flex-center">持票数量</div>
        <div class="day flex-center">锁仓天数</div>
        <div class="time flex-center">到期时间</div>
      </div>
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="list">
          <div class="listItem flex-between" v-for="item in list" :key="item.id">
            <div class="num flex-center">{{ item.amount1 }}</div>
            <div class="day flex-center">{{ item.days }}天</div>
            <div class="time flex-center">{{ item.expiredAt }}</div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const userId = ref(router.currentRoute.value.query.userId ? router.currentRoute.value.query.userId : "");
    const page = ref(1);
    const lastId = ref(0);
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);

    function onLoad() {
      post("/portal", {
        module: "Investment",
        interface: "4000",
        data: {
          page: page.value,
          lastId: lastId.value,
          userId: userId.value,
        },
      }).then((res) => {
        console.log(res);
        let datas = res.data.list;
        if (datas) {
          list.value = list.value.concat(datas);
          loading.value = false;
        }
        lastId.value = res.data.lastId;
        page.value = res.data.currentPage + 1;
        if (page.value > res.data.lastPage) {
          loading.value = false;
          finished.value = true;
        }
      });
    }
    return {
      userId,
      page,
      lastId,
      list,
      loading,
      finished,
      onLoad,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  padding: 88px 30px 0 40px;
  .listBox {
    padding-top: 40px;
    .num {
      width: 28%;
    }
    .day {
      width: 28%;
    }
    .time {
      width: 50%;
      justify-content: flex-end;
    }
    .menu {
      div {
        font-size: 30px;
        font-weight: 500;
        color: #333333;
        line-height: 42px;
        font-weight: bold;
      }
    }
    .list {
      .listItem {
        margin-top: 40px;
        div {
          font-size: 28px;
          font-weight: 400;
          color: #666666;
          line-height: 40px;
        }
      }
    }
  }
}
</style>